<template>
  <div class="study-progress">
    <div class="study-progress-header">
      <h3 class="progress-title">{{ title }}</h3>
      <div class="progress-actions">
        <button 
          v-if="showRefresh" 
          class="refresh-btn"
          @click="refreshProgress"
          :disabled="isRefreshing"
        >
          <i class="icon-refresh" :class="{ 'rotating': isRefreshing }"></i>
          {{ isRefreshing ? '刷新中...' : '刷新' }}
        </button>
        <button 
          v-if="showViewAll" 
          class="view-all-btn"
          @click="viewAll"
        >
          查看全部
          <i class="icon-right"></i>
        </button>
      </div>
    </div>
    
    <div class="study-progress-content">
      <!-- 总体进度概览 -->
      <div class="overall-progress" v-if="showOverallProgress">
        <div class="progress-circle-container">
          <svg class="progress-circle" width="120" height="120" viewBox="0 0 120 120">
            <!-- 背景圆环 -->
            <circle
              class="progress-circle-bg"
              cx="60"
              cy="60"
              r="50"
              fill="none"
              stroke="#e6e6e6"
              stroke-width="8"
            />
            <!-- 进度圆环 -->
            <circle
              class="progress-circle-fill"
              cx="60"
              cy="60"
              r="50"
              fill="none"
              :stroke="progressColor"
              stroke-width="8"
              stroke-linecap="round"
              :stroke-dasharray="circumference"
              :stroke-dashoffset="calculateOffset()"
              transform="rotate(-90 60 60)"
            />
            <!-- 中心文字 -->
            <text class="progress-center-text" x="60" y="56" text-anchor="middle" font-size="18" font-weight="bold">
              {{ overallProgress }}%
            </text>
            <text class="progress-center-subtext" x="60" y="76" text-anchor="middle" font-size="12">
              总进度
            </text>
          </svg>
        </div>
        
        <div class="progress-details">
          <div class="progress-detail-item">
            <div class="detail-label">学习时长</div>
            <div class="detail-value">{{ formatDuration(totalStudyTime) }}</div>
          </div>
          <div class="progress-detail-item">
            <div class="detail-label">已学单词</div>
            <div class="detail-value">{{ learnedWords }}/{{ totalWords }}</div>
          </div>
          <div class="progress-detail-item">
            <div class="detail-label">连续学习</div>
            <div class="detail-value">{{ streakDays }}天</div>
          </div>
        </div>
      </div>
      
      <!-- 学习计划列表 -->
      <div class="plan-list" v-if="plans.length > 0">
        <div 
          v-for="plan in plans" 
          :key="plan.id" 
          class="plan-item"
          :class="{ 'completed': plan.completed }"
        >
          <div class="plan-info">
            <h4 class="plan-name">{{ plan.name }}</h4>
            <div class="plan-meta">
              <span class="plan-date">{{ formatDate(plan.startDate) }} - {{ formatDate(plan.endDate) }}</span>
              <span class="plan-status" :class="getPlanStatusClass(plan)">{{ getPlanStatusText(plan) }}</span>
            </div>
          </div>
          
          <div class="plan-progress-container">
            <div class="plan-progress-bar-wrapper">
              <div 
                class="plan-progress-bar"
                :style="{ 
                  width: `${plan.progress}%`,
                  backgroundColor: getPlanProgressColor(plan)
                }"
              ></div>
            </div>
            <div class="plan-progress-text">{{ plan.progress }}%</div>
          </div>
          
          <div class="plan-actions">
            <button class="plan-action-btn" @click="openPlan(plan.id)">
              详情
            </button>
            <button 
              v-if="!plan.completed" 
              class="plan-action-btn primary"
              @click="continuePlan(plan.id)"
            >
              继续学习
            </button>
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <div class="empty-state" v-else>
        <i class="icon-empty"></i>
        <p class="empty-text">{{ emptyText || '暂无学习计划' }}</p>
        <button v-if="showCreateButton" class="create-btn" @click="createPlan">
          创建学习计划
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, ref } from 'vue'
import { useProgressStore } from '@/store'
import { formatDuration, formatDate } from '@/utils/formatUtils'
import { getPlanStatusText, getPlanStatusClass, getPlanProgressColor } from '@/utils/learningUtils'

export default {
  name: 'StudyProgress',
  props: {
    title: {
      type: String,
      default: '学习进度'
    },
    showOverallProgress: {
      type: Boolean,
      default: true
    },
    showRefresh: {
      type: Boolean,
      default: true
    },
    showViewAll: {
      type: Boolean,
      default: true
    },
    showCreateButton: {
      type: Boolean,
      default: true
    },
    emptyText: {
      type: String,
      default: ''
    },
    plans: {
      type: Array,
      default: () => []
    },
    // 以下属性如果没有传入，则从store中获取
    overallProgress: {
      type: Number,
      default: null
    },
    totalStudyTime: {
      type: Number,
      default: null
    },
    learnedWords: {
      type: Number,
      default: null
    },
    totalWords: {
      type: Number,
      default: null
    },
    streakDays: {
      type: Number,
      default: null
    }
  },
  emits: ['refresh', 'view-all', 'create-plan', 'open-plan', 'continue-plan'],
  setup(props, { emit }) {
    const progressStore = useProgressStore()
    const isRefreshing = ref(false)
    
    // 计算圆周长
    const circumference = 2 * Math.PI * 50
    
    // 计算进度条偏移量
    const calculateOffset = () => {
      const progress = props.overallProgress !== null ? props.overallProgress : progressStore.overallProgress
      return circumference - (progress / 100) * circumference
    }
    
    // 计算进度颜色
    const progressColor = computed(() => {
      const progress = props.overallProgress !== null ? props.overallProgress : progressStore.overallProgress
      if (progress >= 80) return '#52c41a'
      if (progress >= 50) return '#faad14'
      if (progress >= 20) return '#1890ff'
      return '#ff4d4f'
    })
    
    // 获取store中的数据（如果props中没有提供）
    const getStoreValue = (propName, storeKey) => {
      return props[propName] !== null ? props[propName] : progressStore[storeKey]
    }
    
    // 刷新进度
    const refreshProgress = async () => {
      isRefreshing.value = true
      try {
        emit('refresh')
        // 模拟网络请求延迟
        await new Promise(resolve => setTimeout(resolve, 1000))
      } catch (error) {
        console.error('刷新进度失败:', error)
      } finally {
        isRefreshing.value = false
      }
    }
    
    // 查看全部
    const viewAll = () => {
      emit('view-all')
    }
    
    // 创建计划
    const createPlan = () => {
      emit('create-plan')
    }
    
    // 打开计划详情
    const openPlan = (planId) => {
      emit('open-plan', planId)
    }
    
    // 继续学习计划
    const continuePlan = (planId) => {
      emit('continue-plan', planId)
    }
    
    return {
      isRefreshing,
      circumference,
      calculateOffset,
      progressColor,
      formatDuration,
      formatDate,
      getPlanStatusText,
      getPlanStatusClass,
      getPlanProgressColor,
      refreshProgress,
      viewAll,
      createPlan,
      openPlan,
      continuePlan
    }
  }
}
</script>

<style scoped>
.study-progress {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 20px;
  overflow: hidden;
}

.study-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.progress-title {
  font-size: 18px;
  font-weight: 600;
  color: #262626;
  margin: 0;
}

.progress-actions {
  display: flex;
  gap: 12px;
}

.refresh-btn,
.view-all-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
  color: #595959;
  cursor: pointer;
  transition: all 0.3s ease;
}

.refresh-btn:hover:not(:disabled),
.view-all-btn:hover {
  background: #e6f7ff;
  border-color: #91d5ff;
  color: #1890ff;
}

.refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icon-refresh {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-refresh.rotating {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.icon-right {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.study-progress-content {
  position: relative;
}

/* 总体进度概览 */
.overall-progress {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
}

.progress-circle-container {
  flex-shrink: 0;
}

.progress-circle {
  transform: rotate(-90deg);
}

.progress-circle-bg {
  transition: stroke 0.3s ease;
}

.progress-circle-fill {
  transition: stroke-dashoffset 0.6s ease, stroke 0.3s ease;
}

.progress-center-text {
  fill: #262626;
  font-family: inherit;
}

.progress-center-subtext {
  fill: #8c8c8c;
  font-family: inherit;
}

.progress-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
  flex: 1;
}

.progress-detail-item {
  text-align: center;
}

.detail-label {
  font-size: 14px;
  color: #8c8c8c;
  margin-bottom: 8px;
}

.detail-value {
  font-size: 20px;
  font-weight: bold;
  color: #262626;
}

/* 学习计划列表 */
.plan-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan-item {
  background: #fafafa;
  border: 1px solid #f0f0f0;
  border-radius: 8px;
  padding: 16px;
  transition: all 0.3s ease;
}

.plan-item:hover {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
}

.plan-item.completed {
  background: #f6ffed;
  border-color: #b7eb8f;
}

.plan-info {
  margin-bottom: 12px;
}

.plan-name {
  font-size: 16px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.plan-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.plan-date {
  color: #8c8c8c;
}

.plan-status {
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.plan-status.active {
  background: #e6f7ff;
  color: #1890ff;
}

.plan-status.completed {
  background: #f6ffed;
  color: #52c41a;
}

.plan-status.expired {
  background: #fff1f0;
  color: #ff4d4f;
}

.plan-status.upcoming {
  background: #fff7e6;
  color: #faad14;
}

.plan-progress-container {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.plan-progress-bar-wrapper {
  flex: 1;
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.plan-progress-bar {
  height: 100%;
  transition: width 0.6s ease, background-color 0.3s ease;
  border-radius: 4px;
}

.plan-progress-text {
  font-size: 14px;
  font-weight: 600;
  color: #595959;
  min-width: 40px;
  text-align: right;
}

.plan-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.plan-action-btn {
  padding: 6px 16px;
  background: #ffffff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
  color: #595959;
  cursor: pointer;
  transition: all 0.3s ease;
}

.plan-action-btn:hover {
  color: #1890ff;
  border-color: #1890ff;
}

.plan-action-btn.primary {
  background: #1890ff;
  border-color: #1890ff;
  color: #ffffff;
}

.plan-action-btn.primary:hover {
  background: #40a9ff;
  border-color: #40a9ff;
  color: #ffffff;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 40px 20px;
}

.icon-empty {
  display: inline-block;
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#d9d9d9"><path d="M20 6h-3V4c0-1.11-.89-2-2-2H9c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM9 4h6v2H9V4zm11 15H4v-2h16v2zm0-5H4V8h3v2h2V8h6v2h2V8h3v2z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.empty-text {
  font-size: 16px;
  color: #8c8c8c;
  margin-bottom: 20px;
}

.create-btn {
  padding: 8px 24px;
  background: #1890ff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.3s ease;
}

.create-btn:hover {
  background: #40a9ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .study-progress {
    padding: 16px;
  }
  
  .overall-progress {
    flex-direction: column;
    gap: 24px;
  }
  
  .progress-details {
    width: 100%;
  }
  
  .plan-progress-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .plan-progress-text {
    text-align: left;
  }
  
  .plan-actions {
    flex-wrap: wrap;
  }
  
  .progress-title {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .study-progress-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .progress-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .progress-details {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .progress-circle-container {
    transform: scale(0.8);
  }
  
  .plan-actions {
    justify-content: center;
  }
  
  .plan-action-btn {
    flex: 1;
    text-align: center;
  }
}
</style>